<form class="form-inline" id="menu_list_form">
	<div class="input-group">
		<div class="input-group-addon">公众号</div>
		<select id="mp_name_search" name="mpNameSearch" class="form-control">
			<option value="1">易企秀</option>
		</select>
	</div>
	&nbsp;&nbsp;&nbsp;
	<div class="input-group">
		<div class="input-group-addon">菜单</div>
		<select id="first_menu_search" name="firstMenuSearch" class="form-control">
			<option value=""></option>
		</select>
	</div>
    <div class="input-group">
		<select id="second_menu_search" name="secondMenuSearch" class="form-control">
			<option value=""></option>
		</select>
	</div>
	&nbsp;&nbsp;&nbsp;
	<div class="input-group">
		<div class="input-group-addon">状态</div>
		<select id="status-search" name="statusSearch" class="form-control">
			<option value="0">全部</option>
			<option value="-1">关闭</option>
			<option value="1">启用</option>
		</select>
	</div>
	<br/>
	<button type="button" class="btn btn-primary" onclick="query_menu_list('#menu_list_grid', '/m/ie/menu/muti-list.json')" >查询</button>
</form>

<table id="menu_list_grid" data-toggle="table" data-toolbar="#menu_list_form" data-unique-id="sceneId" data-query-params="scene_query_params" data-click-to-select="true" data-page-size="20">
	<thead>
	    <tr>
	    	<th data-field="id">ID</th>
	    	<th data-field="mpName">公众号</th>
	    	<th data-field="firstMenuName">菜单名称</th>
	    	<th data-field="firstSort">菜单排序</th>
			<th data-field="secondMenuName">子菜单名称</th>
	    	<th data-field="secondSort">子菜单排序</th>
	    	<th data-field="appid">APPID</th>
	    	<th data-field="pagePath">pagepath(小程序某个页面)</th>
	    	<th data-field="type" data-formatter="type_formatter">类型(type)</th>
	    	<th data-field="url">URL</th>
	    	<th data-field="updateTime" data-formatter="time_formatter">更新时间</th>
	    	<th data-field="status" data-formatter="status_formatter">状态</th>
	    	<th data-field="id" data-align="center" data-formatter="operation_formatter">操作</th>
	    </tr>
    </thead>
</table>

<div id="site_edit_model" class="modal fade user-dialog" role="dialog" aria-labelledby="site_model_title">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="site_model_title">编辑</h4>
			</div>
			<div class="modal-body">
				<form class="form-inline" id="site_edit_form">
					<input type="hidden" id="id">
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">公众号</div>
							<select class="form-control" name="gongzhonghao" id="gongzhonghao" >
								<option value="1">易企秀</option>
							</select>
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">菜单名称</div>
							<input type="text" id="first-menu" name="firstMenu" maxlength="64" class="form-control">
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">菜单排序</div>
							<input type="text" id="first-sort" name="firstSort" class="form-control">
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">子菜单名称</div>
							<input type="text" id="second-menu" name="secondMenu" maxlength="64" class="form-control">
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">子菜单排序</div>
							<input type="text" id="second-sort" name="secondSort" class="form-control">
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">APPID</div>
							<input type="text" id="app-id" name="appId" class="form-control">
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">pagepath(小程序某个页面)</div>
							<input type="text" id="page-path" name="pagePath" class="form-control">
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">类型</div>
							<select class="form-control" name="type" id="type" >
								<option value="1">view</option>
								<option value="2">miniprogram</option>
							</select>
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">URL</div>
							<input type="text" id="url" name="url" class="form-control">
						</div>
					</div>
					<br><br>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">状态</div>
							<select class="form-control" name="status" id="status" >
								<option value="1">启用</option>
								<option value="-1">关闭</option>
							</select>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" onclick="save_page()">保存</button>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			url: "/m/ie/menu/list",
			type: "GET",
			success: function(data) {
				$("#first_menu_search").empty();
				var itemHtml = '<option value="0">全部</option>';
				$.each(data, function(i, item) {
					var id = item.id;
					var menuName = item.menuName;
					itemHtml += '<option value="'+ id +'">'+ menuName + '</option>';
				});
				$("#first_menu_search").append(itemHtml);
			}
		});
	});

	//查询
    function query_menu_list(id, url) {
        $(id).bootstrapTable('refresh', {url: url});
    }  
     function scene_query_params(params) {
        $('#menu_list_form :input').each(function() {
            if($(this).attr('name')) {
                params[$(this).attr('name')] = $(this).val();
            }
        });
        return params;
    }


    $("#first_menu_search").change(function(){
        var first_menu=$("#first_menu_search").val();

        if ("0" === first_menu) {
			$("#second_menu_search").empty();
			var itemHtml = '<option value="0">全部</option>';
			$("#second_menu_search").append(itemHtml);
			return;
		}
        $.ajax({
            url: "/m/ie/menu/list?upperId="+first_menu,
            type: "GET",
            success: function(data) {
                $("#second_menu_search").empty();
                var itemHtml = '<option value="0">全部</option>';
                $.each(data, function(i, item) {
                    var id = item.id;
                    var menuName = item.menuName;
                    itemHtml += '<option value="'+ id +'">'+ menuName + '</option>';
                });
                $("#second_menu_search").append(itemHtml);
            }
        });
    });


	// 编辑页面
	function edit_page(id) {
		$.ajax({
			url: "/m/ie/menu?id="+id,
			type: "GET",
			success: function(data) {
				$('#id').val(data.id);
				$("#first-menu").val(data.firstMenuName);
				$("#first-sort").val(data.firstSort);
				$("#second-menu").val(data.secondMenuName);
				$("#second-sort").val(data.secondSort);
				// 一级菜单编辑时，二级菜单不允许输入
				if ("" !== $("#first-menu").val() && "" === $("#second-menu").val()) {
					$('#first-menu').attr("readonly", false);
					$('#first-sort').attr("readonly", false);
                    $('#second-menu').attr("readonly", true);
                    $('#second-sort').attr("readonly", true);
                }
				// 二级菜单编辑时，一级菜单不允许输入
				if ("" !== $("#first-menu").val() && "" !== $("#second-menu").val()) {
                    $('#first-menu').attr("readonly", true);
                    $('#first-sort').attr("readonly", true);
					$('#second-menu').attr("readonly", false);
					$('#second-sort').attr("readonly", false);
                }
				$("#app-id").val(data.appid);
				$("#page-path").val(data.pagePath);
				$("#type").val(data.type);
				$("#url").val(data.url);
				$('#status').val(data.status);
			}
		});
		$('#site_edit_model').modal('show');
	}



	// 保存
	function save_page() {

		var id = $('#id').val();
		var firstMenuName = $("#first-menu").val();
		var firstSort = $("#first-sort").val();
		var secondMenuName = $("#second-menu").val();
		var secondSort = $("#second-sort").val();
		var appId = $("#app-id").val();
		var pagePath = $("#page-path").val();
		var type = $("#type").val();
		var url = $("#url").val();
		var status = $('#status').val();

		var httpMethod = "PUT";
		if (id === "") {
			httpMethod = "POST";
		}
		$.ajax({
			url: "/m/ie/menu",
			data: JSON.stringify(
					{
						id:id,
						firstMenuName:firstMenuName,
						firstSort:firstSort,
						secondMenuName:secondMenuName,
						secondSort:secondSort,
						appid:appId,
						pagePath:pagePath,
						type:type,
						url:url,
						status:status
					}
			),
			contentType: "application/json",
			type: httpMethod,
			success: function(data) {
				if(-1 === data) {
					error("一级菜单名称与现有的菜单名称重复");
				} else if (-2 === data) {
					error("二级菜单名称与现有的菜单名称重复");
				} else {
					$("#first_menu_search option[value='"+id+"']").html(firstMenuName);
					$("#second_menu_search option[value='"+id+"']").html(secondMenuName);
					success("保存成功");
					$('#site_edit_model').modal('hide');
					$('#menu_list_grid').bootstrapTable('refresh');
				}
			}
		});
	}

	// 类型格式化
	function type_formatter(value) {
		if (1 === value) {
			return "view";
		} else if (2 === value) {
			return "miniprogram";
		} else {
			return "";
		}
	}

	// 时间格式化
	function time_formatter(value) {
		return new Date(value).format('yyyy-MM-dd hh:mm:ss');
	}

	// 状态格式化
	function status_formatter(value) {
		if (-1 === value) {
			return "关闭";
		} else if (1 === value) {
			return "启用";
		} else {
			return "未知";
		}
	}

	// 操作
	function operation_formatter(value, item) {
		var status = item.status;
		var html = '<button type="button" class="btn btn-link" onclick="edit_page(' + value + ')">编辑</button>';

		if (-1 === status){
			html = html + '<button type="button" class="btn btn-link" onclick="update_status(' + value + ', 1)">启用</button>';
		} else {
			html = html + '<button type="button" class="btn btn-link" onclick="update_status(' + value + ', -1)">关闭</button>';
		}
		return html;
	}

	function update_status(id, status) {
		$.ajax({
			url: "/m/ie/menu/status",
			data: JSON.stringify(
					{
						id:id,
						status:status
					}
			),
			contentType: "application/json",
			type: "PUT",
			success: function(data) {
				success("保存成功");
				$('#menu_list_grid').bootstrapTable('refresh');
			}
		});
	}


</script>